﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>师资团队-课程列表</title>
    <th:block th:include="include :: front-common-css-js" />   
    <style>
        .main1 { }
        .main1 .offset { padding-top: 70px; }
        .main1 .offset .list { overflow: hidden; margin-left: -100px; margin-bottom: -30px; }
        .main1 .offset .list > li { float: left; width: 25%; padding-left: 100px; padding-bottom: 30px; }
        .main1 .offset .list > li:nth-child(4n+1) { clear: both; }
        .main1 .offset .list > li .pic { text-align: center; margin-top: 5px; height: 224px; width: 224px; }
        .main1 .offset .list > li .pic img { border-radius: 50%; display: inline-block; text-align: center; margin-top: 13px; }
        .main1 .offset .list > li .font { text-align: center; }
        .main1 .offset .list > li .font .p1 { font-size: 18px; color: #333; padding-top: 30px; }
        .main1 .offset .list > li .font .p1 .line { display: block; width: 32px; height: 2px; background: #a93f52; margin: 15px auto 20px auto; }
        .main1 .offset .list > li .font .p2 { color: #999; line-height: 24px; }
        .main1 .offset .list > li .font .btn { text-align: center; margin-top: 30px; }
        .main1 .offset .list > li .font .btn .more { display: inline-block; padding: 10px 40px; border-radius: 50px; color: #fff; }
        .main1 .offset .list .li1 .pic { background: url(img/kc_list_bg1.png) no-repeat center center; background-size: contain; }
        .main1 .offset .list .li2 .pic { background: url(img/kc_list_bg2.png) no-repeat center center; background-size: contain; }
        .main1 .offset .list .li1 .font .btn .more { background: #ec8520; }
        .main1 .offset .list .li2 .font .btn .more { background: #058bd6; }

        @media (max-width: 1024px) {
            .main1 .offset .list > li { width: 50%; }
            .main1 .offset .list > li:nth-child(n) { clear: none; }
            .main1 .offset .list > li:nth-child(2n+1) { clear: both; }
            .main1 .offset .list > li .pic { margin-left: auto; margin-right: auto; }
        }

        @media (max-width: 600px) {
            .main1 .offset .list > li { width: 100%; }
            .main1 .offset .list > li:nth-child(n) { clear: none; }
        }

        @media (max-width: 300px) {
            .main1 .offset .list > li .pic { height: auto; width: auto; }
        }
    </style>
    <script>
		$(function () {
		});
    </script>
</head>
<body>
     <!--主体内容 end-->
    <th:block th:include="include :: front-header" />      
    <div class="child_banner"><img   th:src="@{/front/img/jimu.jpg}"  class="g_imgf" /></div>
    <div class="s_child_banner"><img th:src="@{/front/img/jimu.jpg}" class="g_imgf" /></div>
    <!--主体内容-->
    <div class="main1">
        <div class="g_cw">
            <div class="g_title">
                <p class="l2">CURRICULUM <span class="ico"><img th:src="@{/front/img/5c753d7641e09.png}" /></span> SELECTION</p>
                <p class="l1">课程选择</p>
            </div>
            <div class="offset">
                <ul class="list">                  
                    <li class="li1" th:each="course : ${list}" >
                        <a th:href="@{/front/course/detail(id=${course.id})}" href="/front/course/detail/1" class="box" target="_blank">
                            <p class="pic"><img th:src="${course.picture}"  src="/front/img/20fd3b8206f8c509.jpg" class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1" th:text="${course.name}">科学<span class="line"></span></p>
                                <p class="p2" th:text="${course.introduce}">童通过拉丁舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                                <p class="btn"><span class="more">报名</span></p>
                            </div>
                        </a>
                    </li>
                    <!--  
                    <li class="li1">
                        <a href="coursedetail.html?_id=10020" class="box" target="_blank">
                            <p class="pic"><img src="img/4951b35f706ed290.jpg" class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">机器人<span class="line"></span></p>
                                <p class="p2">童通过民族舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                                <p class="btn"><span class="more">报名</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="li1">
                        <a href="coursedetail.html?_id=10019" class="box" target="_blank">
                            <p class="pic"><img src="img/dc65472b0eedd3c5.jpg" class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">绘画与艺术<span class="line"></span></p>
                                <p class="p2">童通过中国舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                                <p class="btn"><span class="more">报名</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="li1">
                        <a href="coursedetail.html?_id=10018" class="box" target="_blank">
                            <p class="pic"><img src="img/5f2f85db4cf71aba.jpg" class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">积木<span class="line"></span></p>
                                <p class="p2">童通过芭蕾的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                                <p class="btn"><span class="more">报名</span></p>
                            </div>
                        </a>
                    </li>
                    -->
                </ul>
            </div>
        </div>
    </div>    
    <!--主体内容 end-->
    <th:block th:include="include:: front-footer" />
</body>
</html>

